<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<zeppelin-page-header
  title="Credentials"
  [extra]="headerExtra"
  [description]="credentialsDescription">
  <ng-template #credentialsDescription>
    Manage your credentials. You can add new credential information. <a [href]="docsLink" target="_blank">
    <i
      nz-icon
      nz-tooltip
      nzTitle="Learn more"
      nzType="question-circle"
      nzTheme="outline"
    ></i>
  </a>

  </ng-template>
  <ng-template #headerExtra>
    <button
      class="repository-trigger"
      nz-button
      [nzType]="showAdd ? 'primary' : 'default'"
      (click)="triggerAdd()">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      Add
    </button>
  </ng-template>
  <div [@collapseMotion]="showAdd ? 'expanded' : 'collapsed' ">
    <nz-divider nzType="horizontal"></nz-divider>
    <h2>Add new credential</h2>
    <form nz-form nzLayout="inline" [formGroup]="addForm" (ngSubmit)="submitForm()">
      <div nz-row>
        <div nz-col [nzSpan]="16">
          <nz-form-item>
            <nz-form-label>Entity</nz-form-label>
            <nz-form-control nzErrorTip="Please input entity!">
              <input [nzAutocomplete]="auto"
                     (input)="onEntityInput($event)"
                     formControlName="entity"
                     nz-input
                     placeholder="Interpreter Name"/>
              <nz-autocomplete nzBackfill #auto>
                <nz-auto-option *ngFor="let option of interpreterFilteredNames" [nzValue]="option">
                  {{ option }}
                </nz-auto-option>
              </nz-autocomplete>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>Username</nz-form-label>
            <nz-form-control nzErrorTip="Please input username!">
              <input formControlName="username" nz-input placeholder="Username"/>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>Password</nz-form-label>
            <nz-form-control nzErrorTip="Please input Password!">
              <input formControlName="password" nz-input type="password" placeholder="Password"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div class="new-actions" nz-col [nzSpan]="8">
          <nz-form-item>
            <nz-form-control>
              <button nz-button nzType="primary" [disabled]="!addForm.valid || adding">Save</button>
              <button nz-button type="button" (click)="cancelAdd()">Cancel</button>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </div>
</zeppelin-page-header>
<div class="content">
  <nz-table nzSize="small"
            [nzData]="credentialControls"
            [nzFrontPagination]="false"
            [nzShowPagination]="false">
    <thead>
    <tr>
      <th>Entity</th>
      <th>Username</th>
      <th>Password</th>
      <th nzWidth="225px" class="actions-head">Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let control of credentialControls">
      <ng-container *ngIf="control.get('entity')?.value as entity" [formGroup]="control">
        <td>{{entity}}</td>

        <ng-container *ngIf="isEditing(control); else credentialDisplay">
          <td><input nz-input formControlName="username"></td>
          <td><input nz-input type="password" formControlName="password"></td>
          <td class="credential-actions">
            <button nz-button nzType="primary" (click)="saveCredential(control)"><i nz-icon nzType="save"
                                                                                    nzTheme="outline"></i> Save
            </button>
            <button nz-button (click)="unsetEditable(control)"><i nz-icon nzType="close" nzTheme="outline"></i> Cancel
            </button>
          </td>
        </ng-container>

        <ng-template #credentialDisplay>
          <td>{{control.get('username')?.value}}</td>
          <td><strong>**********</strong></td>
          <td class="credential-actions">
            <button nz-button (click)="setEditable(control)"><i nz-icon nzType="edit" nzTheme="outline"></i> Edit
            </button>
            <button nz-button
                    nz-popconfirm
                    nzPopconfirmTitle="Do you want to delete this credential information?"
                    (nzOnConfirm)="removeCredential(control)">
              <i nz-icon nzType="delete" nzTheme="outline"></i> Remove
            </button>
          </td>
        </ng-template>
      </ng-container>
    </tr>

    </tbody>
  </nz-table>
</div>
